<template>
	<view class='page'>
		<cu-custom isBack>
			<view slot="content">动态发布</view>
		</cu-custom>
		<view class='headBg'></view>

		<view class='container'>
			<view class='title'>动态描述</view>
			<view class='textarea'>
				<ws-textarea v-model='form.content' :maxlength='desLength' placeholder='请输入动态描述'
					placeholderClass='archivePlaceholder'></ws-textarea>
				<view class='length'>{{form.content.length}}/{{desLength}}</view>
			</view>

			<view class='pic-box'>
				<view class='tabs'>
					<view class='tab-item' :class='{active: tabActive == item.value}' v-for='item in tabs'
						:key='item.value' @click='handleChagneTab(item)'>
						{{item.name}}
					</view>
				</view>
				<view class='pics'>
					<imgUpload v-if='tabActive == "image"' v-model='form.images' :limit='9'></imgUpload>
					<videoUpload v-else v-model='form.videos' :limit='9'></videoUpload>
				</view>
			</view>
		</view>

		<view class='foot-bar'>
			<view class='submit' @click='handleSubmit'>发布</view>
		</view>
	</view>
</template>

<script>
	import {
		getActivityAdd,
		getActivityEdit
	} from '@/api/pet/activity/index'

	import imgUpload from '@/pages/components/imgUpload/index'
	import videoUpload from '@/pages/components/videoUpload/index'
	export default {
		components: {
			imgUpload,
			videoUpload
		},
		data() {
			return {
				type: '1',
				tabActive: 'image',
				tabs: [{
					name: '上传图片',
					value: 'image'
				}, {
					name: '上传视频',
					value: 'video'
				}],
				desLength: 500,
				form: {
					cargoId: undefined,
					content: '',
					images: undefined,
					videos: undefined
				}
			}
		},
		onLoad(e) {
			this.type = e.type;
			this.form.cargoId = uni.getStorageSync('pet_cargoId')
		},
		methods: {
			reset(){
				this.form = {
					cargoId: this.form.cargoId,
					content: '',
					images: undefined,
					videos: undefined
				}
			},
			handleChagneTab(e) {
				if (this.tabActive == e.value) return;
				this.tabActive = e.value;
				this.form.pics = '';
			},
			handleSubmit() {
				if (!this.form.cargoId) return uni.showToast({
					title: '没有宠物信息，请返回宠物页面绑定宠物',
					icon: 'none'
				})
				if (!this.form.content) return uni.showToast({
					title: '请填写描述',
					icon: 'none'
				})
				if (this.tabActive == 'image' && !this.form.images) return uni.showToast({
					title: '请上传图片',
					icon: 'none'
				})
				if (this.tabActive == 'video' && !this.form.videos) return uni.showToast({
					title: '请上传视频',
					icon: 'none'
				})
				getActivityAdd(this.form).then(res => {
					if(res){
						this.reset()
						this.successCallback()
					}
				})
			},
			successCallback() {
				let pages = getCurrentPages();
				let backPage = pages[pages.length - 2];
				backPage.$vm.init && backPage.$vm.init('petBuyer')
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				let timer = setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		}
	}
</script>

<style>
	.archivePlaceholder {
		/* color: #BBBBBB; */
	}
</style>
<style scoped lang="scss">
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
	}

	.headBg {
		width: 100%;
		height: 750rpx;
		background: linear-gradient(180deg, var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
		position: fixed;
		top: 0;
		left: 0;
	}

	.container {
		width: 718rpx;
		margin-left: 16rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: var(--h1Color) ;
			line-height: 42rpx;
		}

		.textarea {
			margin-top: 24rpx;
			width: 100%;
			height: 400rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			padding: 24rpx 28rpx 60rpx 24rpx;
			position: relative;
			font-size: 30rpx;

			.length {
				position: absolute;
				bottom: 24rpx;
				right: 28rpx;
				font-size: 24rpx;
				color: var(--h4Color) ;
			}
		}

		.pic-box {
			margin-top: 40rpx;
			border-top: 2rpx solid #EEEEEE;
			padding-top: 40rpx;
			padding-bottom: 200rpx;

			.tabs {
				display: flex;
				align-items: center;

				.tab-item {
					width: max-content;
					height: 64rpx;
					padding: 0 24rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color:  var(--h1Color) ;
					background: #F5F5F5;
					margin-right: 12rpx;

					&.active {
						background:var(--primaryBg);
					}
				}
			}

			.pics {
				margin-top: 40rpx;
			}
		}
	}

	.foot-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		z-index: 99;
		.submit {
			width: 686rpx;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 48rpx;
			margin-left: 32rpx;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--btnColor);
		}
	}
</style>